<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="400" height="520"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Coordinates
        const groundY = 450;
        const blockA = { x: 95, y: 330, w: 80, h: 120 };
        const blockB = { x: 225, y: 380, w: 70, h: 70 };
        
        const ropeX_A = blockA.x + blockA.w / 2; // 135
        const ropeX_B = blockB.x + blockB.w / 2; // 260
        
        const pulleyCenterX = (ropeX_A + ropeX_B) / 2; // 197.5
        const pulleyCenterY = 150;
        const pulleyRadius = (ropeX_B - ropeX_A) / 2; // 62.5

        // Draw Ground
        ctx.beginPath();
        ctx.moveTo(50, groundY);
        ctx.lineTo(350, groundY);
        ctx.stroke();

        // Draw Block A
        ctx.fillStyle = '#cccccc';
        ctx.fillRect(blockA.x, blockA.y, blockA.w, blockA.h);
        ctx.strokeRect(blockA.x, blockA.y, blockA.w, blockA.h);
        ctx.fillStyle = 'black';
        ctx.font = '24px Arial';
        ctx.fillText('A', blockA.x + blockA.w / 2, blockA.y + blockA.h / 2);

        // Draw Block B
        ctx.fillStyle = '#cccccc';
        ctx.fillRect(blockB.x, blockB.y, blockB.w, blockB.h);
        ctx.strokeRect(blockB.x, blockB.y, blockB.w, blockB.h);
        ctx.fillStyle = 'black';
        ctx.font = '24px Arial';
        ctx.fillText('B', blockB.x + blockB.w / 2, blockB.y + blockB.h / 2);

        // Draw Pulley Wheel
        ctx.beginPath();
        ctx.arc(pulleyCenterX, pulleyCenterY, pulleyRadius, 0, 2 * Math.PI);
        ctx.fillStyle = '#999999';
        ctx.fill();
        ctx.stroke();
        
        // Draw Pulley Bracket
        const bracketWidth = 20;
        const bracketHeight = 50;
        ctx.fillStyle = '#bbbbbb';
        ctx.fillRect(pulleyCenterX - bracketWidth / 2, pulleyCenterY - bracketHeight, bracketWidth, bracketHeight);
        ctx.strokeRect(pulleyCenterX - bracketWidth / 2, pulleyCenterY - bracketHeight, bracketWidth, bracketHeight);
        
        // Draw Rope
        ctx.beginPath();
        ctx.moveTo(ropeX_A, blockA.y);
        ctx.lineTo(ropeX_A, pulleyCenterY);
        ctx.arc(pulleyCenterX, pulleyCenterY, pulleyRadius, Math.PI, 0);
        ctx.lineTo(ropeX_B, blockB.y);
        ctx.stroke();
        
        // Draw Force F
        const forceLineTopY = 50;
        ctx.beginPath();
        ctx.moveTo(pulleyCenterX, pulleyCenterY - bracketHeight);
        ctx.lineTo(pulleyCenterX, forceLineTopY);
        ctx.stroke();

        // Arrowhead for Force F
        const arrowHeadSize = 10;
        ctx.beginPath();
        ctx.moveTo(pulleyCenterX, forceLineTopY);
        ctx.lineTo(pulleyCenterX - arrowHeadSize / 2, forceLineTopY + arrowHeadSize);
        ctx.moveTo(pulleyCenterX, forceLineTopY);
        ctx.lineTo(pulleyCenterX + arrowHeadSize / 2, forceLineTopY + arrowHeadSize);
        ctx.stroke();

        // Label for Force F
        ctx.font = 'italic bold 24px Arial';
        ctx.fillText('F', pulleyCenterX + 20, forceLineTopY + 15);

        // Draw Caption
        ctx.font = '28px "SimSun", "Songti SC"';
        ctx.fillStyle = 'black';
        ctx.fillText('习题 1-29 图', 200, 490);

    </script>
</body>
</html>